import {
  EyeInvisibleOutlined,
  EyeOutlined,
  LockOutlined,
  UserOutlined
} from '@ant-design/icons';
import { Button, Form, Input, message } from 'antd';
import React, { memo, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import http from '@/services/request';
import { action13 } from '../home/createAction';
import store from '../home/store';
import Login from './style';
import LoginModal from './LoginModal';

export default memo(function Index() {
  const Navigator = useNavigate();
  const [form] = Form.useForm();
  //开始默认为普通登录
  store.dispatch(action13('普通登录'));
  const loginRef: any = useRef();
  const [visible, setVisible] = useState<boolean>(false);

  const login = () => {
    const info = loginRef.current.getFieldsValue();
    http
      .post('/node/users/login', info)
      .then((res: any) => {
        if (res.code === 200) {
          message.success('登录成功');
          Navigator('/cultivation');
        } else {
          message.error(res.message || '登录失败');
        }
      })
      .catch((error) => {
        // eslint-disable-next-line no-console
        console.log(error);
      });
  };
  return (
    <Login>
      {/* // eslint-disable-next-line react-hooks/rules-of-hooks */}
      <div className="bgc" />
      <div className="loginer">
        <div className="title">
          <span className="title-1">智慧肉鸡服务云平台</span>
        </div>
        <div className="id-msx">
          <Form ref={loginRef} form={form}>
            <Form.Item name={'username'}>
              <Input
                placeholder={'请输入用户名'}
                autoComplete="off"
                prefix={
                  <UserOutlined
                    style={{
                      fontSize: '30px',
                      marginLeft: '20%',
                      marginTop: '20%'
                    }}
                  />
                }
              ></Input>
            </Form.Item>
            <Form.Item name="password">
              <Input.Password
                placeholder={'请输入密码'}
                autoComplete="off"
                visibilityToggle={true}
                iconRender={(visible) =>
                  visible ? (
                    <EyeOutlined
                      style={{ fontSize: '30px', marginTop: '30%' }}
                    />
                  ) : (
                    <EyeInvisibleOutlined
                      style={{ fontSize: '30px', marginTop: '30%' }}
                    />
                  )
                }
                prefix={
                  <LockOutlined
                    style={{
                      fontSize: '30px',
                      marginLeft: '20%',
                      marginTop: '20%'
                    }}
                  />
                }
              />
            </Form.Item>
          </Form>
        </div>
        <div className="morelogin">
          <span className="morelogin-check">
            <label htmlFor="Automatic-logon">
              <input type="checkbox" id="Automatic-logon" />
              <a>记住密码</a>
            </label>
          </span>
        </div>
        <div>
          <Button className="button" onClick={() => login()}>
            <b>登录</b>
          </Button>
        </div>
        <div className="morefunction">
          <span className="regist-button">
            <Button type="text" style={{ color: 'white' }} onClick={() => setVisible(true)}>没有账号,去注册</Button>
          </span>
        </div>
      </div>
      <LoginModal visible={visible} closeModal={() => setVisible(false)} />
    </Login>
  );
});
